{% extends "layout.html" %}

{% block content %}
<div class="ty-searchblock ty-homeblock1 py-5">
    <div class="container py-lg-4 py-md-3">
        <!-- block -->
        <div class="row">
            <div class="col-lg-9 most-recent">
               {% for data in collects %}
                <h3 class="section-title-left mt-lg-5" id="link_{{ data.id }}">{{ data.name }}</h3>
                <div class="row">
                    {% for sdata in data.collects %}
                    <div class="col-sm-3 col-md-2 col-4 mb-3">
                        <div class="link-item">
                            <a href="{{ sdata.url }}" class="link-title collect-title" target="_blank">{{ sdata.name }}</a>
                        </div>
                    </div>
                    {% endfor %}
                  </div>
                {% endfor %}
            </div>
            <div class="col-lg-3 trending mt-lg-0 mt-5 mb-lg-5">
                <div class="pos-sticky">
                    <h3 class="section-title-left">文章分类 </h3>
                    {% for data in types %}
                    <div class="grids5-info">
                        <h4>0{{ loop.index }}.</h4>
                        <div class="blog-info">
                            <a href="#link_{{ data.id }}" class="blog-desc1"> 
                                <div class="category-item">
                                    <div class="category-img">
                                        <img src="{{ data.image }}" alt="{{ data.name }}" class="img-fluid"/>
                                    </div>
                                    <div class="category-name">
                                        <p>{{ data.name }} </p>
                                        <p class="category-resources">{{ data.num }}收藏</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <!-- //block-->

        <!-- ad block -->
        <div class="ad-block text-center mt-5">
           <!-- <a href="#url"><img src="/assets/images/ad.gif" class="img-fluid" alt="ad image" /></a>-->
        </div>
        <!-- //ad block -->
    </div>
</div>

{% endblock %}